<template>
	<div>
		<div class="breadcrumb">
			<el-button type="text" @click="$router.back()" icon="el-icon-arrow-left" style="font-size: 14px;">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">培训班</div>
				<div>
					<el-button type="primary" size="mini" class="topButton" round @click="editors" v-if="trainingData.status != '2'">编辑</el-button>
					<el-button type="primary" size="mini" class="topButton" round @click="share">分享</el-button>
				</div>
			</div>
			<div class="dataLi flex" style="justify-content: space-between;" v-cloak>
				<div class="flex" v-if="trainingData" style="justify-content: space-between;">
					<el-image v-if="trainingData.photo" class="liImage" :src="trainingData.photo" fit="cover"></el-image>
					<div v-else class="liImage imgText">{{ trainingData.startDate }}</div>
					<div>
						<p class="titleName">主题：{{ trainingData.theme }}</p>
						<div class="flex" style="justify-content: space-between;">
							<div>
								<p class="msgList">培训时间：{{ trainingData.startDate }} 至 {{ trainingData.endDate }}</p>
								<p class="msgList">培训地点：{{ trainingData.address }}</p>
								<p class="msgList">专家成员：{{ trainingData.experts }}</p>
								<p class="msgList">关键词：{{ trainingData.keyWord }}</p>
							</div>
							<div>
								<p class="msgList flex" style="align-items: center;">评价星级：<el-rate v-model="trainingData.evaluate" disabled
									 text-color="#F6AF15"></el-rate>
								</p>
								<p class="msgList">学员人数：{{ trainingData.actualNumber }}人</p>
								<p class="msgList">评论条数：{{ trainingData.comments }}条</p>
								<p class="msgList">点击数量：{{ trainingData.point }}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<el-scrollbar wrap-class="scrollbar-wrapper" style="width: 100%;">
				<div class="listTitleItemBox">
					<div class="listTitleBox" v-for="(item, index) in listTitle" :key="index" :class="listTitleIndex == index?'listTitleBoxActive':''"
					 @click="navTitles(index)">
						<span>{{item}}</span>
					</div>
				</div>
			</el-scrollbar>

			<div>
				<!-- 专家列表 -->
				<specialist v-if="listTitleIndex == 0"></specialist>
				<!-- 学员列表 -->
				<studentList v-else-if="listTitleIndex == 1"></studentList>
				<!-- 课程安排 -->
				<curriculum v-else-if="listTitleIndex == 2"></curriculum>
				<!-- 培训课件 -->
				<courseware v-else-if="listTitleIndex == 3"></courseware>
				<noData v-else></noData>
			</div>
		</div>
	</div>
</template>

<script>
	import specialist from './components/specialistList.vue'
	import studentList from './components/studentList.vue'
	import curriculum from './components/curriculum.vue'
	import courseware from './components/courseware.vue'
	export default {
		components: {
			specialist,
			studentList,
			curriculum,
			courseware
		},
		data() {
			return {
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				listTitle: ['专家列表', '学员列表', '课程安排', '培训课件', '视频'],
				listTitleIndex: 0,
				// 培训班数据
				trainingData: ''
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 21)
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id

			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId

			this.getClassDetail()
		},
		watch: {


		},
		methods: {
			share() {
				// 分享
				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', document.location.href);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$message.success('链接复制成功，请分享')
				}
				document.body.removeChild(input);
			},
			navTitles(i) {
				this.listTitleIndex = i
			},
			getClassDetail() {
				// 获取培训班详情
				this.$request.postForm(this.$api.getClassDetail, {
					classId: this.$route.params.id
				}).then(res => {
					if (res.code == 200) {
						this.trainingData = res.data
					}
				})
			},
			editors() {
				// 编辑培训班
				this.$router.push(`/entrance/cultivateschool/addcultivate?id=${this.$route.params.id}`)
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		/* margin-bottom: 20px; */
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.dataUl,
	.dataLi {
		width: 100%;
	}

	.dataLi {
		padding: 20px 0;
		background: #FFFFFF;
		/* border-bottom: 1px solid #EEEEEE; */
		align-items: center;
	}

	.dataIsActive {
		background: #FAFAFA;
	}

	.liImage {
		width: 140px;
		height: 100px;
		margin-right: 20px;
	}

	.imgText {
		text-align: center;
		line-height: 100px;
		font-size: 16px;
		color: #333333;
		font-weight: 400;
	}

	.el-button--small {
		height: 36px;
		width: 110px;
	}

	.titleName {
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		width: 550px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* margin-bottom: 30px; */
	}

	.titleName span {
		margin-right: 35px;
	}

	.msgList {
		color: #454545;
		font-size: 12px;
		line-height: 21px;
		width: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.listTitleItemBox {
		min-width: 100%;
		background: #F3F3F3;
		/* display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap; */
		border-bottom: 1px solid #23B14D;
		white-space: nowrap;
	}

	.listTitleBox {
		width: 140px;
		color: #333333;
		height: 40px;
		text-align: center;
		line-height: 40px;
		display: inline-block;
	}

	.listTitleBox span {
		cursor: pointer;
	}

	.listTitleBoxActive {
		background: #23B14D;
		color: #FFFFFF;
	}
</style>
